<template>
    <div>

        <el-form :model="ruleForm" :rules="rules" ref="addForm" label-width="50px" class="demo-ruleForm">
            <el-row :gutter="24">
                <el-col :span="12">
                    <img src="../../../../static/contract/16-18.png" style="height:auto; width:90%;"/>
                </el-col>

                <el-col :span="12">

                    <el-row :gutter="24">
                        <el-col :span="22">
                            <el-form-item label="1." prop="ydy">
                                <el-input type="text" v-model="ruleForm.ydy" placeholder="约定一"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="22">
                            <el-form-item label="2." prop="yde">
                                <el-input type="text" v-model="ruleForm.yde" placeholder="约定二"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="22">
                            <el-form-item label="3." prop="yds">
                                <el-input type="text" v-model="ruleForm.yds" placeholder="约定三"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="4." prop="htksrq">
                                <el-date-picker
                                v-model="ruleForm.htksrq"
                                type="date"
                                placeholder="合同开始时间"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd"
                                clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="5." prop="htjsrq">
                                <el-date-picker
                                v-model="ruleForm.htjsrq"
                                type="date"
                                placeholder="合同结束时间"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd"
                                clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="6." prop="wtrqz">
                                <el-input type="text" v-model="ruleForm.wtrqz" placeholder="委托人签字"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="7." prop="wtrkhh">
                                <el-input type="text" v-model="ruleForm.wtrkhh" placeholder="委托人开户行"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="8." prop="wtrzh">
                                <el-input type="text" v-model="ruleForm.wtrzh" placeholder="委托人账号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="9." prop="wtrdh">
                                <el-input type="text" v-model="ruleForm.wtrdh" placeholder="委托人电话"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="22">
                            <el-form-item label="10." prop="wtrqzrq">
                                <el-date-picker
                                v-model="ruleForm.wtrqzrq"
                                type="date"
                                placeholder="委托人签字日期"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd"
                                clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="11." prop="pmrqz">
                                <el-input type="text" v-model="ruleForm.pmrqz" placeholder="拍卖人签字"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="12." prop="pmrkhh">
                                <el-input type="text" v-model="ruleForm.pmrkhh" placeholder="拍卖人开户行"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="11">
                            <el-form-item label="13." prop="pmrzh">
                                <el-input type="text" v-model="ruleForm.pmrzh" placeholder="拍卖人账号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="14." prop="pmrdh">
                                <el-input type="text" v-model="ruleForm.pmrdh" placeholder="拍卖人电话"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="22">
                            <el-form-item label="15." prop="pmrqzrq">
                                <el-date-picker
                                v-model="ruleForm.pmrqzrq"
                                type="date"
                                placeholder="拍卖人签字日期"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd"
                                clearable>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24">
                        <el-col :span="13">
                            &nbsp;
                        </el-col>
                        <el-col :span="2">
                            <el-form-item>
                                <el-button type="primary" @click="submit">保存</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>
        </el-form>
    </div>

</template>
<script>
export default {
    data () {
        return {
            ruleForm: {
                ydy: "",//约定一
                yde: "",//约定二
                yds: "",//约定三
                htksrq: "",//合同开始时间
                htjsrq: "",//合同结束时间
                wtrqz: "",//委托人签字
                wtrkhh: "",//委托人开户行
                wtrzh: "",//委托人账号
                wtrdh: "",//委托人电话
                wtrqzrq: "",//委托人签字日期
                pmrkhh: "",//拍卖人开户行
                pmrzh: "",//拍卖人账号
                pmrdh: "",//拍卖人电话
                pmrqzrq: "",//拍卖人签字日期

            },

            // contractAdd: false,

            rules: {
                wtr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                bdzmc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zblj: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zqpj: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmfs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmksrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                pmdd: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                ggksrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                ggjsrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                sfkygg: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                zdjmrs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                sflhpm: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                jfr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jfjzrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                jfdd: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jffs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                bgfcdr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jkzffs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                jkzfqx: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmccyy: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wscxz: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                xdlhts: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wlhclfs: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wyzr: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zyjjxz: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                zcwyhmc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                rmfymc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                ydy: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                yde: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                yds: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                htksrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                htjsrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                wtrqz: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrkhh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrzh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrdh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                wtrqzrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                pmrkhh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmrzh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmrdh: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmrqzrq: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                pmdw: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                pmje: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                remark: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                ggmtmc: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                yjzcjjbfb: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                hlfybk: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                hlfyje: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                hlfxzts: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
            }
        };
    },
    methods: {
        submit(){
            this.$refs.addForm.validate((valid) => {
                if(valid){
                    this.$emit('submit', this.ruleForm);
                }
                else{
                    this.$message.warning('注意必填项');
                    return ;
                }
            })
        },
    }

}
</script>
